<template>
  <div class="container">
    <div :class="clas1" id="body1">
        <!-- 添加 ref 以便在 JS 中操作 -->
        <div :class="f1" ref="movingDiv"></div>
    </div>
    <div class="controls">
    <button @click="changeStyle">动态样式</button>
    <button @click="logout">退出登录</button>
    <button @click="tohalo">tohalo</button>
    <input type="text" @keyup.enter="clickenter">
    </div>
    <div v-text="message"></div>
    <div class="img">
        <div class="img1" v-for="(item, index) in imgs" :key="index">
            <img :src="item" alt="" v-if="index % 2 === 0">
        </div>
    </div>
 </div>
</template>

<script>
// 从 vue-router 导入 useRouter
import { useRouter } from 'vue-router'
// 从 vue 核心库导入 ref、onMounted 和 onUnmounted
import { ref, onMounted, onUnmounted } from 'vue'
const w1img = require('@/assets/w1.jpg')
const w2img = require('@/assets/w2.jpg')
const w3img = require('@/assets/w3.jpg')

export default {
    name: 'DataBind',

    data() {
        return {
            imgs: [
            w1img,w2img,w3img
            ],
            message: 'test message',
            clas1: '',
            f1: '',
            myDiv: {
                backgroundColor: 'green',
                width: '500px',
                height: '500px'
            },
            div2: {
                backgroundColor: 'red',
                width: '100px',
                height: '100px'
            },
            pink: 'pink',
            width: '100%',
            height: '200px'
        }
    },

    computed: {
        router() {
            return useRouter()
        }
    },

    setup() {
        const movingDiv = ref(null)
        let animationInterval = null

        const moveRandomly = () => {
            if (movingDiv.value && movingDiv.value.parentElement) {
                const parent = movingDiv.value.parentElement
                const parentRect = parent.getBoundingClientRect()
                const divRect = movingDiv.value.getBoundingClientRect()

                const maxX = parentRect.width - divRect.width
                const maxY = parentRect.height - divRect.height

                const randomX = Math.floor(Math.random() * maxX)
                const randomY = Math.floor(Math.random() * maxY)

                movingDiv.value.style.left = `${randomX}px`
                movingDiv.value.style.top = `${randomY}px`
            }
        }

        onMounted(() => {
            animationInterval = setInterval(moveRandomly, 1000)
        })

        onUnmounted(() => {
            clearInterval(animationInterval)
        })

        return {
            movingDiv
        }
    },

    methods: {
        tohalo() {
            this.$router.push('/halo')
        },
        changeStyle() {
            this.clas1 = 'clas1'
            this.f1 = 'f1'
            this.message = '现在正在显示动态样式'
        },
        logout() {
            sessionStorage.setItem('showLogin', '0')
            this.$router.push('/LoginDoubao')
        },
        changeRB() {
            this.myDiv.backgroundColor = 'red'
            this.myDiv.width = '1000'
            this.myDiv.height = '600'
            this.div2.backgroundColor = '#000'
            this.div2.width = '200'
            this.div2.height = '300'
            this.div2["border-radius"] = '200px'
        },
        clickenter(event) {
          this.message = event.target.value;
          event.target.value = '';
       },
    }
}
</script>

<style scoped>
.body1 {}

#body1 {}
.container {
    max-width: 800px;
    margin: 0 auto;
    padding: 20px;
}
.controls {
    margin: 20px 0;
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}
.clas1 {
    position: relative;
    /* 确保子元素绝对定位相对于此元素 */
    background-color: green;
    width: 500px;
    height: 500px;
}

.f1 {
    position: absolute;
    /* 绝对定位以便移动 */
    background-color: red;
    width: 100px;
    height: 100px;
    left: 0;
    top: 0;
}
.img {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 20px;
}
.img1 img {
    max-width: 200px;
    height: auto;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}

input[type="text"] {
    padding: 8px 12px;
    border: 1px solid #ccc;
    border-radius: 4px;
    font-size: 16px;
}
button {
    padding: 8px 16px;
    background-color: #42b983;
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    transition: background-color 0.2s;
}

button:hover {
    background-color: #3aa876;
}

</style>

